<template>
  <el-row>
    <el-col>
      <el-menu router unique-opened :default-active="active" :collapse="isCollapse" :collapse-transition="false"
        class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
        <template v-for="(item, index) in menuData" :key="index">
          <!-- 判断是否是子菜单 -->
          <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.index">
            <template #title>
              <el-icon :class="item.icon">
                <!-- 这里通常不会嵌套组件，但如果您有特殊需求可以这样做 -->
                <component :is="item.component" />
              </el-icon>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item v-for="(child, childIndex) in item.children" :key="childIndex" :index="child.index">
              {{ child.title }}
            </el-menu-item>
          </el-sub-menu>
          <!-- 否则是普通菜单项 -->
          <el-menu-item v-else :index="item.index">
            <template #title>
              <el-icon :class="item.icon">
                <component :is="item.component" />
              </el-icon>
              <span>{{ item.title }}</span>
            </template>
          </el-menu-item>
        </template>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  DataLine,
  Setting,
  Menu,
  Operation,
  CreditCard,
} from "@element-plus/icons-vue";
import { MenuItem } from "../shared/adminprotocols/base";

export default defineComponent({
  components: {
    DataLine,
    Setting,
    Menu,
    Operation,
    CreditCard,
  },
  setup(){
    const menuData = ref<MenuItem[]>( []); 
      menuData.value =[
        {
          index: '/',
          icon: 'el-icon-s-data', // 假设这些是组件名或图标类名  
          title: '网站说明',
          component:"DataLine",
          children: []
        },
        {
          index: '2',
          title: '系统管理',
          icon: 'el-icon-setting',
          component:"Setting",
          children: [
            { index: '/sys', title: '网站设置' }
          ]
        },
        {
          index: '3',
          title: '内容管理',
          icon: 'el-icon-menu',
          component:"Menu",
          children: [
            { index: '/category', title: '栏目管理' },
            { index: '/page', title: '页面管理' },
            { index: '/article?cur=1$keywords=&cid=0', title: '文章管理' },
            { index: '/tag?cur=1$keywords=', title: '标签管理' },
            { index: '/frag', title: '碎片管理' },
          ]
        },
        {
          index: '4',
          title: '功能管理',
          icon: 'el-icon-s-operation',
          component:"Operation",
          children: [
            { index: '/model', title: '扩展模型' },
            { index: '/friendlink', title: '友情链接' },
            { index: '/ad', title: '广告管理' },
            { index: '/message', title: '留言管理' },
            { index: '/shop', title: '商城管理' },
          ]
        },
        {
          index: '5',
          title: '管理员',
          icon: 'el-icon-bank-card',
          component:"CreditCard",
          children: [
            { index: '/admin', title: '管理员列表' }
          ]
        },
        {
          index: '6',
          title: '用户管理',
          icon: 'el-icon-bank-card',
          component:"CreditCard",
          children: [
            { index: '/user', title: '用户列表' },
            { index: '/balance', title: '钻石记录' },
          ]
        },
      ];
    return {
      menuData
    }
  },
  data() {
    return {
      active: ""
    };
  },
  props: {
    collapse: {
      type: Boolean,
      default: false, // 默认不折叠
    },
  },

  computed: {
    isCollapse() {
      return this.collapse;
    },
    toggleButton() {
      if (this.isCollapse) {
        return "minMargin";
      } else {
        return "maxMargin";
      }
    },
  },
  mounted() {
    this.active = `/${this.$route.path.split("/")[1]}`;
  },
  methods: {
    handleOpen(key: any, keyPath: any) {
      console.log(key, keyPath);
    },
    handleClose(key: any, keyPath: any) {
      console.log(key, keyPath);
    },
    togleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
  },
});
</script>
<style scoped>
.el-menu {
  border-right: 0;
}

.el-sub-menu.is-opened .el-sub-menu__icon-arrow {
  color: #1890ff;
  font-weight: lighter;
}

.el-menu-item.is-active {
  color: #1890ff;
}

.el-sub-menu.is-opened span {
  color: #1890ff;
}

.el-sub-menu.is-opened .el-icon {
  color: #1890ff;
}

.el-sub-menu .el-icon {
  color: #909399;
  font-size: 14px;
}

/* .el-sub-menu.is-opened [class^="el-icon-"] {
  color: #1890ff;
} */
.el-sub-menu .el-menu-item {
  padding: 0 48px !important;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
